<template>
  <!-- 成员管理 -->
  <div class="database-setting-user-container overflow-y">
    <el-button
      type="primary"
      icon="el-icon-circle-plus-outline"
      style="margin-bottom: 10px"
      @click.native.prevent="invitePeople()"
    >邀请成员</el-button>
    <!-- 成员列表 -->
    <el-table
      :data="team_doctor_list"
      :header-cell-style="{ background: '#f7f7f7' }"
    >
      <el-table-column label="成员姓名" center prop="name">
        <template slot-scope="scope">
          <div>
            {{ scope.row.name }}
            <span style="color: red">{{
              scope.row.creator ? "(创建者)" : ""
            }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="账号" prop="account" />
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <div class="flex-r align-item-ct justify-ct">
            <el-tooltip
              content="暂无权限管理"
              placement="top"
              effect="light"
              :disabled="scope.row.creator?scope.row.creator:getAuth('9')"
            >
              <div>
                <el-button
                  :disabled="scope.row.creator?scope.row.creator:!getAuth('9')"
                  type="text"
                  size="mini"
                  :style="{ color: '#66b1ff' }"
                  @click.native.prevent="getTreeListNow(scope.row.relation_id)"
                >
                  权限管理
                </el-button>
              </div>
            </el-tooltip>
            <el-tooltip
              content="暂无删除权限"
              placement="top"
              effect="light"
              :disabled="scope.row.creator?scope.row.creator:getAuth('11')"
            >
              <div>
                <el-button
                  size="mini"
                  type="text"
                  :disabled="scope.row.creator?scope.row.creator:!getAuth('11')"
                  style="margin: 0; padding: 0"
                  :style="{ color: 'red' }"
                  @click.native.prevent="
                    getDelRelationDoctor(scope.row.relation_id)
                  "
                >
                  删除
                </el-button>
              </div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 邀请成员弹框 -->
    <el-dialog
      title="邀请成员"
      :visible.sync="ismatters"
      center
      append-to-body
      width="60%"
      @close="close"
    >
      <div slot="title" class="dialog-title t-right">
        <div class="back-icon pointer">
          <i class="el-icon-arrow-left" @click="goBack" />
        </div>
        <div>邀请医务</div>
      </div>
      <el-input
        v-model="search"
        placeholder="请输入医生名称"
        style="width: 20%"
        clearable
        @clear="getInviteDoctor"
        @keyup.enter.native.prevent="searchDoctor"
        @change="searchDoctor"
      >
        <i slot="prefix" class="el-input__icon el-icon-search" />
      </el-input>
      <el-button
        style="margin-left: 20px"
        type="primary"
        @click="add_dialogVisible = true"
      >添加新成员</el-button>
      <el-table
        :data="invite_doctor_list"
        :header-cell-style="{ background: '#f7f7f7' }"
        style="margin-top: 10px"
      >
        <el-table-column align="center" prop="name" label="姓名" />
        <el-table-column align="center" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.sex == 1 ? "男" : "女" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="hospital" label="医院" />
        <el-table-column align="center" prop="department" label="科室" />
        <el-table-column align="center" prop="titles" label="职称" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              content="暂无删除权限"
              placement="top"
              effect="light"
              :disabled="getAuth('10')"
            >
              <div>
                <el-button
                  v-if="!scope.row.relation_status"
                  type="text"
                  size="mini"
                  :disabled="!getAuth('10')"
                  @click.native.prevent="getAddRelationDoctor(scope.row.id)"
                >添加</el-button>
                <el-button
                  v-else-if="scope.row.relation_status == 1"
                  disabled
                  style="width: 100px"
                  type="text"
                >同意加入</el-button>
                <el-button
                  v-else-if="scope.row.relation_statuss == 3"
                  disabled
                  style="width: 100px"
                  type="text"
                >已加入</el-button>
                <el-button v-else disabled>邀请已发出</el-button>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 没有数据显示 -->
      <div v-if="!invite_doctor_list.length > 0" style="text-align: center">
        未创建成员，<el-button
          type="text"
          size="default"
          @click.native.prevent="add_dialogVisible = true"
        >前往创建</el-button>
      </div>
      <div class="block">
        <el-pagination
          current-page.sync="1"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="invite__total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
    <!-- 添加成员弹框 -->
    <el-dialog
      title="添加成员"
      append-to-body
      :visible.sync="add_dialogVisible"
      width="30%"
    >
      <span>请前往后台添加新成员</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="add_dialogVisible = false">取 消</el-button>
        <a :href="goBackgound"><el-button
          type="primary"
        >前往添加</el-button></a>
      </span>
    </el-dialog>
    <!-- 权限设置弹框 -->
    <el-dialog
      title="权限设置"
      class="database-setting-user-dialog"
      center
      :visible.sync="isEdit"
      append-to-body
      @close="setPermisstion"
    >
      <AuthoritySetting :tree-list="tree_list" @sendChecked="receiveChecked" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false">取 消</el-button>
        <el-button type="primary" @click="getEditDcotorAuth">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AuthoritySetting from './components/AuthoritySetting.vue'
import {
  inviteDoctor,
  getTeamList,
  addRelationDoctor,
  delRelationDoctor,
  getTreeList,
  editDcotorAuth
} from '@/api/authorityManagement'
export default {
  name: 'SettingUser',
  components: {
    AuthoritySetting
  },
  data() {
    return {
      ismatters: false, // 邀请弹框显示
      search: '', // 搜素数据
      add_dialogVisible: false, // 添加成员弹框
      isEdit: false, // 权限设置弹框
      team_doctor_list: [], // 当前库医生数组
      invite_doctor_list: [], // 邀请医生数组
      invite__total: '', // 邀请医生总人数
      // 设置弹框数据
      checkAll: false, // 默认不全选
      checkedCities: [],
      cities: ['上海', '北京', '广州', '深圳'],
      isIndeterminate: false,
      database_id: String, // 数据库id
      relationDoctorPage: Number, // 受邀医务页数
      isSearch: false, // 搜索
      tree_list: {}, // 权限数据
      checked: [], // 选中权限数组
      SelectRelation_id: ''
    }
  },
  computed: {
    // 判断用户是否有权限
    getAuth(index) {
      return index => {
        const auth = this.$store.state.database.information.auths.auth
        const res = auth.indexOf(index)
        if (res === -1) {
          return false
        } else {
          return true
        }
      }
    },
    // 获取后台链接
    goBackgound() {
      let host = ''
      if (process.env.NODE_ENV === 'development') {
        host = 'http://api.qitaijk.cn' + '/houtai.php/index/login'
      } else {
        host = 'http://' + window.location.host + '/houtai.php/index/login'
      }
      return host
    }
  },
  watch: {
    $route() {
      this.ismatters = false
      this.add_dialogVisible = false
    }
  },
  created() {
    console.log(process.env.NODE_ENV)
    this.database_id = this.$store.state.database.database_id
    this.getInviteDoctor()
    this.getTeamDoctorList()
  },
  methods: {
    // 关闭邀请医务弹框
    close() {
      this.getTeamDoctorList()
    },
    handleSizeChange() {},
    //  点击跳转分页
    handleCurrentChange(val) {
      this.getInviteDoctor(val)
    },
    // 全选函数
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
    },
    // 关闭权限设置弹框
    setPermisstion() {
      this.checkAll = false
      this.checkedCities = []
      this.isIndeterminate = false
    },
    // 获邀请医生列表
    async getInviteDoctor(page) {
      let data = {}
      // 正常获取
      if (!this.isSearch) {
        data = {
          database_id: this.database_id,
          page: page || 1,
          limit: 5
        }
      } else {
        // 搜索获取
        data = {
          database_id: this.database_id,
          page: page || 1,
          limit: 5,
          search: this.search
        }
      }
      this.relationDoctorPage = data.page
      const res = await inviteDoctor(data)
      this.invite_doctor_list = res.data.data.lists
      this.invite__total = res.data.data.total
      console.log(res)
    },
    // 获取当前库医生列表
    async getTeamDoctorList() {
      const data = {
        database_id: this.database_id
        // page: 1,
        // limit: 10
      }
      const res = await getTeamList(data)
      this.team_doctor_list = res.data.data.list
    },
    // 邀请医务
    async getAddRelationDoctor(usercare_id) {
      const invite_usercare_id = this.$store.state.user.userInfo.user_id
      const data = {
        database_id: this.database_id,
        invite_usercare_id: invite_usercare_id,
        usercare_id: usercare_id
      }
      console.log(data)
      const res = await addRelationDoctor(data)
      console.log(res)
      this.getInviteDoctor(this.relationDoctorPage)
      this.$message.success('邀请成功')
    },
    // 返回成员列表
    goBack() {
      this.ismatters = false
      this.getTeamDoctorList()
    },
    // 移除医务
    getDelRelationDoctor(relation_id) {
      const data = {
        relation_id: relation_id
      }
      // 先校验是否删除
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除函数
        console.log(data)
        const res = await delRelationDoctor(data)
        console.log(res)
        this.$message.success('删除成功')
        this.getTeamDoctorList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 邀请成员
    invitePeople() {
      this.ismatters = true
      this.getInviteDoctor(this.relationDoctorPage)
    },
    // 搜索医务
    async searchDoctor() {
      this.isSearch = true
      this.getInviteDoctor()
    },
    // 获取当前医生的权限列表
    async getTreeListNow(relation_id) {
      this.isEdit = true
      const data = {
        relation_id: relation_id
      }
      this.SelectRelation_id = relation_id
      console.log(data)
      const res = await getTreeList(data)
      this.checked = res.data.data.checked
      this.tree_list = res.data.data
    },
    // 接收选中权限数组
    receiveChecked(e) {
      console.log('权限', e)
      this.checked = e
    },
    // 修改医务权限
    async getEditDcotorAuth() {
      // 数组为空，里面加字符，不然后台接收不到
      if (this.checked.length === 0) {
        this.checked = ['']
      }
      const data = {
        relation_id: this.SelectRelation_id,
        relation_auth: this.checked
      }
      console.log(data)
      const res = await editDcotorAuth(data)
      console.log(res)
      this.isEdit = false
      this.$message.success('操作成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.span-right {
  margin-right: 10px;
}
.back-icon {
  position: absolute;
  color: #919191;
  font-size: 17px;
}
.database-setting-user-container {
  height: 480px;
}
.overflow-y {
  overflow-y: auto;
}
.overflow-y::-webkit-scrollbar {
  width: 5px;
}
.overflow-y::-webkit-scrollbar-thumb {
  border-radius: 10px;
  //  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #99a9bf;
}
.overflow-y::-webkit-scrollbar-track {
  //  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #d3dce6;
}
.pointer {
  cursor: pointer;
}
</style>
